import {
  StyleSheet,
  Text,
  TextInput,
  View,
  Dimensions,
  TouchableHighlight,
  ScrollView,
  Image,
  FlatList,
} from "react-native";
import React, { useEffect, useState } from "react";
import Ionicons from "@expo/vector-icons/Ionicons";
import { Tabs } from "@ant-design/react-native";
import { router } from "expo-router";
import axios from "axios";
import Api from '../Api/api'
export default function Academic() {
  const [state, setState] = useState(false); //控制搜索框的显示
  const [text, onChangeText] = useState("");
  const [List, setlist] = useState([]); //肿瘤专家列表
  // 发送请求
  useEffect(() => {
    getlist();
  }, []);
  //获取肿瘤专家列表
  const getlist = async () => {
    try {
      const {
        data: { data },
      } = await Api.get("/yg/expert");
      setlist(data);
    } catch (error) {
      console.log(error);
    }
  };

  return (
    <View style={styles.container}>
      {/* 搜索 */}
      {state ? (
        <>
          <View style={styles.searchbox}>
            <View style={styles.searchinput}>
              <Ionicons name="search-outline" size={18} color={"#ccc"} />
              <TextInput
                style={styles.input}
                onChangeText={onChangeText}
                value={text}
                placeholder="搜索"
              />
            </View>
          </View>
        </>
      ) : (
        <>
          <View style={styles.searchbox}>
            <TouchableHighlight
              onPress={() => {
                setState(true);
              }}
            >
              <View style={styles.search}>
                <Ionicons name="search-outline" size={24} color={"#ccc"} />
                <Text style={{ marginLeft: 10, color: "#ccc" }}>搜索</Text>
              </View>
            </TouchableHighlight>
          </View>
        </>
      )}

      {/* 肿瘤专家列表 */}
      <View style={styles.main}>
        <FlatList
          data={List}
          renderItem={({ item }) => (
            <TouchableHighlight
              onPress={() => {
                router.push({
                  pathname: "/YgFile/DescAcademic",
                  params: {
                    id: item._id,
                  },
                });
              }}
            >
              <View style={styles.mainItem} key={item._id}>
                <Image
                  style={{ width: 100, height: 100, paddingLeft: 10 }}
                  source={{ uri: item.img }}
                />
                <View style={{ marginLeft: 10 }}>
                  <Text style={styles.title}>{item.expertname}</Text>
                  <Text style={styles.context}>
                    {item.hospital} {item.department}
                  </Text>
                  <Text style={styles.title}>{item.job}</Text>
                </View>
              </View>
            </TouchableHighlight>
          )}
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  searchbox: {
    width: Dimensions.get("window").width,
    height: 70,
    alignItems: "center",
    justifyContent: "center",
  },
  search: {
    width: Dimensions.get("window").width - 100,
    height: 40,
    display: "flex",
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#FFF",
    borderRadius: 20,
  },
  searchinput: {
    width: Dimensions.get("window").width - 100,
    height: 40,
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    backgroundColor: "#FFF",
    borderRadius: 20,
  },
  input: {
    height: 40,
    width: "90%",
  },
  main: {
    width: Dimensions.get("window").width,
    marginTop: 10,
  },
  mainItem: {
    width: Dimensions.get("window").width,
    height: 100,
    backgroundColor: "#FFF",
    marginTop: 10,
    flexDirection: "row",
  },
  title: {
    paddingTop: 10,
  },
  context: {
    paddingTop: 20,
  },
});
